<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>CheckBox 复选框 | Vue DevUI</title>
    <meta name="description" content="Vue DevUI 组件库">
    <link rel="stylesheet" href="/assets/style.b884dd64.css">
    <link rel="modulepreload" href="/assets/Home.e734a50d.js">
    <link rel="modulepreload" href="/assets/AlgoliaSearchBox.e66f60b3.js">
    <link rel="modulepreload" href="/assets/app.43ba01c1.js">
    <link rel="modulepreload" href="/assets/components_checkbox_index.md.3ec7d7a1.lean.js">
    <link rel="modulepreload" href="/assets/app.43ba01c1.js">
    <link rel="icon" type="image/svg+xml" href="/assets/logo.svg">
    <meta name="twitter:title" content="CheckBox 复选框 | Vue DevUI">
    <meta property="og:title" content="CheckBox 复选框 | Vue DevUI">
  </head>
  <body>
    <div id="app"><!--[--><div class="theme"><header class="nav-bar" data-v-4bb0db66><div class="nav-bar-inner" data-v-4bb0db66><div class="sidebar-button" data-v-4bb0db66><svg class="icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z" class></path></svg></div><a class="nav-bar-title" aria-label="Vue DevUI, back to home" data-v-4bb0db66 data-v-4d0f7fcc><img class="logo" src="/../../assets/logo.svg" alt="Logo" data-v-4d0f7fcc><span data-v-4d0f7fcc>Vue DevUI</span></a><!--[--><!--[--><div id="docsearch" multilang="false"></div><!--]--><!--]--><div class="flex-grow" data-v-4bb0db66></div><div class="flex items-center" data-v-4bb0db66><div class="nav" data-v-4bb0db66><nav class="nav-links" data-v-4bb0db66 data-v-5b7b1e24><!--[--><!-- <div v-for="item in theme.nav" :key="item.text" class="item"> --><!--[--><div class="item" data-v-5b7b1e24><div class="nav-link" data-v-5b7b1e24 data-v-53d6b5a1><a class="item" href="/quick-start/" data-v-53d6b5a1>组件 <!----></a></div></div><div class="item" data-v-5b7b1e24><div class="nav-link" data-v-5b7b1e24 data-v-53d6b5a1><a class="item" href="/contributing/" data-v-53d6b5a1>贡献指南 <!----></a></div></div><div class="item" data-v-5b7b1e24><div class="nav-link" data-v-5b7b1e24 data-v-53d6b5a1><a class="item isExternal" href="https://devcloudfe.github.io/devui-playground" target="_blank" rel="noopener noreferrer" data-v-53d6b5a1>Playground <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-53d6b5a1><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><div class="item" data-v-5b7b1e24><div class="nav-link" data-v-5b7b1e24 data-v-53d6b5a1><a class="item isExternal" href="https://github.com/DevCloudFE/vue-devui/releases/tag/v1.5.1" target="_blank" rel="noopener noreferrer" data-v-53d6b5a1>1.5.1 <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-53d6b5a1><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><div class="item" data-v-5b7b1e24><div class="nav-dropdown-link" data-v-5b7b1e24 data-v-40cec4b2><button class="button" data-v-40cec4b2><span class="button-text" data-v-40cec4b2>文档</span><span class="right button-arrow" data-v-40cec4b2></span></button><ul class="dialog" data-v-40cec4b2><!--[--><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://github.com/DevCloudFE/vue-devui/releases" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>更新日志</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://devui.design/design-cn/start" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>设计规范</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-5b7b1e24><div class="nav-dropdown-link" data-v-5b7b1e24 data-v-40cec4b2><button class="button" data-v-40cec4b2><span class="button-text" data-v-40cec4b2>生态</span><span class="right button-arrow" data-v-40cec4b2></span></button><ul class="dialog" data-v-40cec4b2><!--[--><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://devui.design/" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>Ng DevUI</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://devui.design/admin-page/home" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>Ng DevUI Admin</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://react-devui.surge.sh/" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>React DevUI</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://github.com/DevCloudFE/DevUIHelper" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>DevUI Helper</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://github.com/DevCloudFE/devui-playground" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>DevUI Playground</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://devui.design/icon/ruleResource" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>图标库</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><!--]--></ul></div></div><!--]--><!--]--><!----><!----></nav></div><div class="custom-nav flex items-center ml-l" data-v-4bb0db66><!----><!----><div class="custom-nav-item flex items-center ml-m" data-v-4bb0db66><!--[--><span class="devui-popper-trigger"><svg class="icon-theme" viewbox="0 0 1024 1024" width="16" height="16" data-v-6fec2a10><path fill="var(--devui-text)" d="M512 96C229.696 96 0 325.696 0 608c0 90.368 30.304 174.496 85.344 236.896 55.264 62.624 129.152 97.12 208.128 97.12 81.568 0 161.536-36.832 231.264-106.592l2.272-2.496c65.792-81.472 132.896-121.056 205.088-121.056 46.72 0 89.216 15.872 126.688 29.92 30.336 11.328 56.576 21.12 81.216 21.12C1024 762.912 1024 654.336 1024 608c0-282.304-229.696-512-512-512z m428 602.912c-13.088 0-35.296-8.288-58.784-17.088-40.48-15.136-90.848-33.952-149.12-33.952-92.352 0-175.328 46.944-253.76 143.456-57.184 56.704-121.056 86.688-184.832 86.688-60.352 0-117.216-26.784-160.128-75.456C88.64 751.872 64 682.784 64 608 64 360.96 264.96 160 512 160s448 200.96 448 448c0 27.328-1.952 90.912-20 90.912z m-203.296-182.848a64 64 0 1 0 128 0 64 64 0 1 0-128 0z m-343.68-202.688a64 64 0 1 0 128 0 64 64 0 1 0-128 0z m215.68 26.688a64 64 0 1 0 128 0 64 64 0 1 0-128 0z m-381.312 112a64 64 0 1 0 128 0 64 64 0 1 0-128 0zM182.4 698.752a96 96 0 1 0 192 0 96 96 0 1 0-192 0z" data-v-6fec2a10></path></svg></span><!--teleport start--><!--teleport end--><!--]--></div><a class="custom-nav-item ml-m" style="font-size:0;user-select:none;" href="https://github.com/DevCloudFE/vue-devui" target="_blank" data-v-4bb0db66><svg viewBox="0 0 20 20" width="18" height="18" data-v-4bb0db66><path fill="var(--devui-text, #252b3a)" d="M10 0a10 10 0 0 0-3.16 19.49c.5.1.68-.22.68-.48l-.01-1.7c-2.78.6-3.37-1.34-3.37-1.34-.46-1.16-1.11-1.47-1.11-1.47-.9-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.9 1.52 2.34 1.08 2.91.83.1-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.94 0-1.1.39-1.99 1.03-2.69a3.6 3.6 0 0 1 .1-2.64s.84-.27 2.75 1.02a9.58 9.58 0 0 1 5 0c1.91-1.3 2.75-1.02 2.75-1.02.55 1.37.2 2.4.1 2.64.64.7 1.03 1.6 1.03 2.69 0 3.84-2.34 4.68-4.57 4.93.36.31.68.92.68 1.85l-.01 2.75c0 .26.18.58.69.48A10 10 0 0 0 10 0" data-v-4bb0db66></path></svg></a></div></div></div></header><aside class="sidebar" data-v-06a2164a><nav class="nav-links nav" data-v-06a2164a data-v-5b7b1e24><!--[--><!-- <div v-for="item in theme.nav" :key="item.text" class="item"> --><!--[--><div class="item" data-v-5b7b1e24><div class="nav-link" data-v-5b7b1e24 data-v-53d6b5a1><a class="item" href="/quick-start/" data-v-53d6b5a1>组件 <!----></a></div></div><div class="item" data-v-5b7b1e24><div class="nav-link" data-v-5b7b1e24 data-v-53d6b5a1><a class="item" href="/contributing/" data-v-53d6b5a1>贡献指南 <!----></a></div></div><div class="item" data-v-5b7b1e24><div class="nav-link" data-v-5b7b1e24 data-v-53d6b5a1><a class="item isExternal" href="https://devcloudfe.github.io/devui-playground" target="_blank" rel="noopener noreferrer" data-v-53d6b5a1>Playground <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-53d6b5a1><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><div class="item" data-v-5b7b1e24><div class="nav-link" data-v-5b7b1e24 data-v-53d6b5a1><a class="item isExternal" href="https://github.com/DevCloudFE/vue-devui/releases/tag/v1.5.1" target="_blank" rel="noopener noreferrer" data-v-53d6b5a1>1.5.1 <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-53d6b5a1><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><div class="item" data-v-5b7b1e24><div class="nav-dropdown-link" data-v-5b7b1e24 data-v-40cec4b2><button class="button" data-v-40cec4b2><span class="button-text" data-v-40cec4b2>文档</span><span class="right button-arrow" data-v-40cec4b2></span></button><ul class="dialog" data-v-40cec4b2><!--[--><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://github.com/DevCloudFE/vue-devui/releases" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>更新日志</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://devui.design/design-cn/start" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>设计规范</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-5b7b1e24><div class="nav-dropdown-link" data-v-5b7b1e24 data-v-40cec4b2><button class="button" data-v-40cec4b2><span class="button-text" data-v-40cec4b2>生态</span><span class="right button-arrow" data-v-40cec4b2></span></button><ul class="dialog" data-v-40cec4b2><!--[--><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://devui.design/" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>Ng DevUI</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://devui.design/admin-page/home" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>Ng DevUI Admin</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://react-devui.surge.sh/" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>React DevUI</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://github.com/DevCloudFE/DevUIHelper" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>DevUI Helper</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://github.com/DevCloudFE/devui-playground" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>DevUI Playground</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://devui.design/icon/ruleResource" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>图标库</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><!--]--></ul></div></div><!--]--><!--]--><!----><!----></nav><!--[--><!--]--><ul class="sidebar-links" data-v-06a2164a><!--[--><li class="sidebar-link"><a class="sidebar-link-item" href="/quick-start/"><!----><span class="sidebar-link-text">快速开始<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/on-demand/"><!----><span class="sidebar-link-text">按需引入<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/theme-guide/"><!----><span class="sidebar-link-text">主题定制<!----></span></a><!----></li><li class="sidebar-link"><p class="sidebar-link-item"><!----><span class="sidebar-link-text">通用<!----></span></p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/components/button/"><!----><span class="sidebar-link-text">Button 按钮<!----></span></a><!----></li><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/fullscreen/"><!----><span class="sidebar-link-text">Fullscreen 全屏<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/icon/"><!----><span class="sidebar-link-text">Icon 图标<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/overlay/"><!----><span class="sidebar-link-text">Overlay 遮罩层<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/panel/"><!----><span class="sidebar-link-text">Panel 面板<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/ripple/"><!----><span class="sidebar-link-text">Ripple 水波纹<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/search/"><!----><span class="sidebar-link-text">Search 搜索框<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/status/"><!----><span class="sidebar-link-text">Status 状态<!----></span></a><!----></li><!----><!----></ul></li><li class="sidebar-link"><p class="sidebar-link-item"><!----><span class="sidebar-link-text">导航<!----></span></p><ul class="sidebar-links"><!----><!----><!----><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/dropdown/"><!----><span class="sidebar-link-text">Dropdown 下拉菜单<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/menu/"><!----><span class="sidebar-link-text">Menu 菜单<!----></span></a><!----></li><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/pagination/"><!----><span class="sidebar-link-text">Pagination 分页<!----></span></a><!----></li><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/tabs/"><!----><span class="sidebar-link-text">Tabs 选项卡<!----></span></a><!----></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item"><!----><span class="sidebar-link-text">反馈<!----></span></p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/components/alert/"><!----><span class="sidebar-link-text">Alert 警告<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/drawer/"><!----><span class="sidebar-link-text">Drawer 抽屉板<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/loading/"><!----><span class="sidebar-link-text">Loading 加载提示<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/message/"><!----><span class="sidebar-link-text">Message 全局提示<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/modal/"><!----><span class="sidebar-link-text">Modal 弹窗<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/notification/"><!----><span class="sidebar-link-text">Notification 全局通知<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/popover/"><!----><span class="sidebar-link-text">Popover 悬浮提示<!----></span></a><!----></li><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/result/"><!----><span class="sidebar-link-text">Result 结果<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/tooltip/"><!----><span class="sidebar-link-text">Tooltip 提示<!----></span></a><!----></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item"><!----><span class="sidebar-link-text">数据录入<!----></span></p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/components/auto-complete/"><!----><span class="sidebar-link-text">AutoComplete 自动补全<!----></span></a><!----></li><!----><li class="sidebar-link"><a class="sidebar-link-item active" href="/components/checkbox/"><!----><span class="sidebar-link-text">Checkbox 复选框<!----></span></a><!----></li><!----><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/date-picker-pro/"><!----><span class="sidebar-link-text">DatePickerPro 日期选择器<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/editable-select/"><!----><span class="sidebar-link-text">EditableSelect 可输入下拉选择框<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/form/"><!----><span class="sidebar-link-text">Form 表单<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/input/"><!----><span class="sidebar-link-text">Input 输入框<!----></span></a><!----></li><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/input-number/"><!----><span class="sidebar-link-text">InputNumber 数字输入框<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/mention/"><!----><span class="sidebar-link-text">Mention 提及<!----></span></a><!----></li><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/radio/"><!----><span class="sidebar-link-text">Radio 单选框<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/select/"><!----><span class="sidebar-link-text">Select 下拉框<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/slider/"><!----><span class="sidebar-link-text">Slider 滑块<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/switch/"><!----><span class="sidebar-link-text">Switch 开关<!----></span></a><!----></li><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/textarea/"><!----><span class="sidebar-link-text">Textarea 多行文本框<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/time-picker/"><!----><span class="sidebar-link-text">TimePicker 时间选择器<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/time-select/"><!----><span class="sidebar-link-text">TimeSelect 时间选择器<!----></span></a><!----></li><!----><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/upload/"><!----><span class="sidebar-link-text">Upload 上传<!----></span></a><!----></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item"><!----><span class="sidebar-link-text">数据展示<!----></span></p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/components/avatar/"><!----><span class="sidebar-link-text">Avatar 头像<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/badge/"><!----><span class="sidebar-link-text">Badge 徽标<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/card/"><!----><span class="sidebar-link-text">Card 卡片<!----></span></a><!----></li><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/collapse/"><!----><span class="sidebar-link-text">Collapse 折叠面板<!----></span></a><!----></li><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/countdown/"><!----><span class="sidebar-link-text">Countdown 倒计时<!----></span></a><!----></li><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/image-preview/"><!----><span class="sidebar-link-text">ImagePreview 图片预览<!----></span></a><!----></li><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/progress/"><!----><span class="sidebar-link-text">Progress 进度条<!----></span></a><!----></li><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/rate/"><!----><span class="sidebar-link-text">Rate 评分<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/skeleton/"><!----><span class="sidebar-link-text">Skeleton 骨架屏<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/statistic/"><!----><span class="sidebar-link-text">Statistic 统计数值<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/steps/"><!----><span class="sidebar-link-text">Steps 步骤条<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/table/"><!----><span class="sidebar-link-text">Table 表格<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/tag/"><!----><span class="sidebar-link-text">Tag 标签<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/timeline/"><!----><span class="sidebar-link-text">Timeline 时间轴<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/tree/"><!----><span class="sidebar-link-text">Tree 树<!----></span></a><!----></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item"><!----><span class="sidebar-link-text">布局<!----></span></p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/components/grid/"><!----><span class="sidebar-link-text">Grid 栅格<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/layout/"><!----><span class="sidebar-link-text">Layout 布局<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/splitter/"><!----><span class="sidebar-link-text">Splitter 分割器<!----></span></a><!----></li></ul></li><!--]--></ul><!--[--><!--]--></aside><!-- TODO: make this button accessible --><div class="sidebar-mask"></div><main class="page" data-v-35e0cb6b><div class="container" data-v-35e0cb6b><!--[--><!--]--><div style="position:relative;" class="content" data-v-35e0cb6b><div><h1 id="checkbox-复选框" tabindex="-1">CheckBox 复选框 <a class="header-anchor" href="#checkbox-复选框" aria-hidden="true">#</a></h1><p>多选框。</p><h4 id="何时使用" tabindex="-1">何时使用 <a class="header-anchor" href="#何时使用" aria-hidden="true">#</a></h4><ol><li>在一组选项中进行多项选择；</li><li>单独使用可以表示在两个状态之间切换，可以和提交操作结合。</li></ol><h3 id="基本用法" tabindex="-1">基本用法 <a class="header-anchor" href="#基本用法" aria-hidden="true">#</a></h3><div class="demo-block demo-index" data-v-2b1aa91d><!--[--><div class="source" data-v-2b1aa91d><!--[--><div><div class="checkbox-basic-demo"><div class="" style=""><div class="devui-checkbox active"><label title class="devui-checkbox--md" style="width:auto;"><input class="devui-checkbox__input" type="checkbox" indeterminate="false" checked><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">Checked</span></label></div></div><div class="" style=""><div class="devui-checkbox unchecked"><label title class="devui-checkbox--md" style="width:auto;"><input class="devui-checkbox__input" type="checkbox" indeterminate="false"><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">Not checked</span></label></div></div><div class="" style=""><div class="devui-checkbox unchecked"><label title="my title" class="devui-checkbox--md" style="width:auto;"><input class="devui-checkbox__input" type="checkbox" indeterminate="false"><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">Custom title</span></label></div></div><div class="" style=""><div class="devui-checkbox active"><label title class="devui-checkbox--md" style="width:auto;"><input class="devui-checkbox__input" type="checkbox" indeterminate="false" checked><span style="" class="devui-checkbox__material devui-checkbox--no-animation devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick devui-checkbox--no-animation"></polygon></g></svg></span><span class="devui-checkbox__label-text">No Animation</span></label></div></div><div class="" style=""><div class="devui-checkbox active disabled"><label title class="devui-checkbox--md" style="width:auto;"><input class="devui-checkbox__input" type="checkbox" indeterminate="false" checked disabled><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">Disabled</span></label></div></div><div class="" style=""><div class="devui-checkbox disabled unchecked"><label title class="devui-checkbox--md" style="width:auto;"><input class="devui-checkbox__input" type="checkbox" indeterminate="false" disabled><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">Disabled</span></label></div></div><div class="" style=""><div class="devui-checkbox half-checked unchecked"><label title class="devui-checkbox--md" style="width:auto;"><input class="devui-checkbox__input" type="checkbox" indeterminate="true"><span style="" class="devui-checkbox__material"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">Half-checked</span></label></div></div><div class="" style=""><div class="devui-checkbox half-checked disabled unchecked"><label title class="devui-checkbox--md" style="width:auto;"><input class="devui-checkbox__input" type="checkbox" indeterminate="true" disabled><span style="" class="devui-checkbox__material"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">Half-checked</span></label></div></div><div class="" style=""><div class="devui-checkbox active"><label title class="devui-checkbox--md" style="width:auto;"><input class="devui-checkbox__input" type="checkbox" indeterminate="false" checked><span style="border-color:RGB(255, 193, 7);background-image:linear-gradient(RGB(255, 193, 7), RGB(255, 193, 7));" class="devui-checkbox__material custom-color devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">Custom color</span></label></div></div><div class="" style=""><div class="devui-checkbox half-checked unchecked"><label title class="devui-checkbox--md" style="width:auto;"><input class="devui-checkbox__input" type="checkbox" indeterminate="true"><span style="border-color:RGB(255, 193, 7);background-image:linear-gradient(RGB(255, 193, 7), RGB(255, 193, 7));background-color:RGB(255, 193, 7);" class="devui-checkbox__material custom-color"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">Half-checked</span></label></div></div><div class="" style=""><div class="devui-checkbox unchecked"><label title class="devui-checkbox--md" style="width:auto;"><input class="devui-checkbox__input" type="checkbox" indeterminate="false"><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text"><!--[--><div class="inline-row" style="display:inline-flex;"><div class="devui-select devui-select--sm"><div class="devui-select__selection"><input value type="text" class="devui-select__input devui-select__input--sm" placeholder="请选择" readonly><span class="devui-select__clear"><svg width="10px" height="10px" viewbox="0 0 10 10" version="1.1" xmlns="http://www.w3.org/2000/svg"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-3.000000, -3.000000)" fill-rule="nonzero"><path d="M11.6426,3.19816936 C11.9239974,2.91574512 12.4131626,2.93784891         12.7352108,3.24751057 C13.0571998,3.5572302 13.0901298,4.03723416         12.8087324,4.31965839 L9.14064666,7.99900183 L12.8087324,11.6803416         C13.0645482,11.9370909 13.0605893,12.3571292 12.8158402,12.6640749         L12.7352108,12.7524894 C12.4131626,13.0621511 11.9239974,13.0842548         11.6426,12.8018306 L8,9.14489021 L4.35740003,12.8018306 C4.10158422,13.05858         3.6740594,13.0636532 3.35648225,12.8298003 L3.26478919,12.7524894         C2.94280021,12.4427698 2.90987023,11.9627658 3.19126762,11.6803416         L6.8583349,7.99900183 L3.19126762,4.31965839 C2.93545181,4.06290908         2.93941068,3.64287076 3.18415975,3.3359251 L3.26478919,3.24751057         C3.58683735,2.93784891 4.07600264,2.91574512 4.35740003,3.19816936         L8,6.85411161 L11.6426,3.19816936 Z"></path></g></g></svg></span><span class="devui-select__arrow"><svg width="1em" height="1em" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M12.1464466,6.85355339 L8.35355339,10.6464466 C8.15829124,10.8417088 7.84170876,10.8417088         7.64644661,10.6464466 L3.85355339,6.85355339 C3.65829124,6.65829124 3.65829124,6.34170876         3.85355339,6.14644661 C3.94732158,6.05267842 4.07449854,6 4.20710678,6 L11.7928932,6 C12.0690356,6         12.2928932,6.22385763 12.2928932,6.5 C12.2928932,6.63260824 12.2402148,6.7597852 12.1464466,6.85355339 Z" fill-rule="nonzero"></path></g></svg></span></div><!--teleport start--><!--teleport end--></div><span>Custom label template</span></div><!--]--></span></label></div></div></div></div><!--]--></div><div class="meta" data-v-2b1aa91d><!----><div class="highlight" data-v-2b1aa91d><!--[--><div class="language-vue"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>checkbox-basic-demo<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-checkbox</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Checked<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:isShowTitle</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>checked<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-checkbox</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Not checked<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:isShowTitle</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>unchecked<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-checkbox</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Custom title<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:isShowTitle</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>true<span class="token punctuation">&quot;</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>my title<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>unchecked2<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-checkbox</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>No Animation<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:isShowTitle</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>checked2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:showAnimation</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-checkbox</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Disabled<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:isShowTitle</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>checked<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:disabled</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>true<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-checkbox</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Disabled<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:isShowTitle</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>unchecked<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:disabled</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>true<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-checkbox</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Half-checked<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:isShowTitle</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:half-checked</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>halfCheck<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>allCheck<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@change</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>onHalfCheckboxChange<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-checkbox</span>
      <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Half-checked<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">:isShowTitle</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">:half-checked</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>halfCheck<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>allCheck<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">@change</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>onHalfCheckboxChange<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">:disabled</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>true<span class="token punctuation">&quot;</span></span>
    <span class="token punctuation">/&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-checkbox</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Custom color<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:isShowTitle</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>customCheck<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>RGB(255, 193, 7)<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-checkbox</span>
      <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Half-checked<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">:isShowTitle</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">:half-checked</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>halfCheck2<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>allCheck2<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">@change</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>onHalfCheckboxChange2<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>RGB(255, 193, 7)<span class="token punctuation">&quot;</span></span>
    <span class="token punctuation">/&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-checkbox</span> <span class="token attr-name">:isShowTitle</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>unchecked3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inline-row<span class="token punctuation">&quot;</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">display</span><span class="token punctuation">:</span> inline-flex</span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-select</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>value1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:options</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>[1, 2, 3, 4]<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>sm<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handleChange<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-select</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">&gt;</span></span>Custom label template<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-checkbox</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> <span class="token punctuation">{</span> defineComponent<span class="token punctuation">,</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span><span class="token punctuation">;</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> checked <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> checked2 <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> unchecked <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> unchecked2 <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> unchecked3 <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> halfCheck <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> halfCheck2 <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> allCheck <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> allCheck2 <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> customCheck <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> value1 <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token keyword">const</span> <span class="token function-variable function">onHalfCheckboxChange</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      halfCheck<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token operator">!</span>allCheck<span class="token punctuation">.</span>value<span class="token punctuation">;</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;halfCheckbox checked:&#39;</span><span class="token punctuation">,</span> value<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> <span class="token function-variable function">onHalfCheckboxChange2</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      halfCheck2<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token operator">!</span>allCheck2<span class="token punctuation">.</span>value<span class="token punctuation">;</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;halfCheckbox checked:&#39;</span><span class="token punctuation">,</span> value<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> <span class="token function-variable function">handleChange</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">$event</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      $event<span class="token punctuation">.</span><span class="token function">preventDefault</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      $event<span class="token punctuation">.</span><span class="token function">stopPropagation</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      checked<span class="token punctuation">,</span>
      checked2<span class="token punctuation">,</span>
      unchecked<span class="token punctuation">,</span>
      unchecked2<span class="token punctuation">,</span>
      unchecked3<span class="token punctuation">,</span>
      halfCheck<span class="token punctuation">,</span>
      halfCheck2<span class="token punctuation">,</span>
      allCheck<span class="token punctuation">,</span>
      allCheck2<span class="token punctuation">,</span>
      onHalfCheckboxChange<span class="token punctuation">,</span>
      customCheck<span class="token punctuation">,</span>
      onHalfCheckboxChange2<span class="token punctuation">,</span>
      handleChange<span class="token punctuation">,</span>
      value1<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
<span class="token selector">.checkbox-basic-demo .devui-checkbox</span> <span class="token punctuation">{</span>
  <span class="token property">margin-bottom</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.checkbox-basic-demo .inline-row .devui-select</span> <span class="token punctuation">{</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 150px<span class="token punctuation">;</span>
  <span class="token property">margin-right</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><!--]--></div></div><!--]--><div class="demo-block-control" data-v-2b1aa91d><i class="control-icon icon-caret-down" data-v-2b1aa91d></i><span style="display:none;" class="control-text" data-v-2b1aa91d>显示代码</span><div class="control-button-wrap" data-v-2b1aa91d><span style="display:none;" class="control-button copy-button" data-v-2b1aa91d>复制代码片段</span></div></div></div><h3 id="使用-checkboxgroup" tabindex="-1">使用 CheckBoxGroup <a class="header-anchor" href="#使用-checkboxgroup" aria-hidden="true">#</a></h3><div class="demo-block demo-index" data-v-2b1aa91d><!--[--><div class="source" data-v-2b1aa91d><!--[--><div><div class="checkbox-group-demo"><h4 class="title">Input Object Array</h4><div class="devui-checkbox__group is-row"><!--[--><div class="" style="" id="1"><div class="devui-checkbox disabled unchecked"><label title="data1" class="devui-checkbox--md" style="width:auto;"><input name="data1" class="devui-checkbox__input" type="checkbox" indeterminate="false" disabled><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">data1</span></label></div></div><div class="" style="" id="2"><div class="devui-checkbox active"><label title="data2" class="devui-checkbox--md" style="width:auto;"><input name="data2" class="devui-checkbox__input" type="checkbox" indeterminate="false" checked><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">data2</span></label></div></div><div class="" style="" id="3"><div class="devui-checkbox unchecked"><label title="data3" class="devui-checkbox--md" style="width:auto;"><input name="data3" class="devui-checkbox__input" type="checkbox" indeterminate="false"><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">data3</span></label></div></div><!--]--></div><h4 class="title">Input String Array</h4><div class="devui-checkbox__group is-row"><!--[--><div class="" style=""><div class="devui-checkbox active"><label title class="devui-checkbox--md" style="width:auto;"><input name="data1" class="devui-checkbox__input" type="checkbox" indeterminate="false" checked><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">data1</span></label></div></div><div class="" style=""><div class="devui-checkbox active"><label title class="devui-checkbox--md" style="width:auto;"><input name="data2" class="devui-checkbox__input" type="checkbox" indeterminate="false" checked><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">data2</span></label></div></div><div class="" style=""><div class="devui-checkbox unchecked"><label title class="devui-checkbox--md" style="width:auto;"><input name="data3" class="devui-checkbox__input" type="checkbox" indeterminate="false"><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">data3</span></label></div></div><div class="" style=""><div class="devui-checkbox unchecked"><label title class="devui-checkbox--md" style="width:auto;"><input name="data4" class="devui-checkbox__input" type="checkbox" indeterminate="false"><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">data4</span></label></div></div><div class="" style=""><div class="devui-checkbox unchecked"><label title class="devui-checkbox--md" style="width:auto;"><input name="data5" class="devui-checkbox__input" type="checkbox" indeterminate="false"><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">data5</span></label></div></div><div class="" style=""><div class="devui-checkbox unchecked"><label title class="devui-checkbox--md" style="width:auto;"><input name="data6" class="devui-checkbox__input" type="checkbox" indeterminate="false"><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">data6</span></label></div></div><div class="" style=""><div class="devui-checkbox unchecked"><label title class="devui-checkbox--md" style="width:auto;"><input name="data7" class="devui-checkbox__input" type="checkbox" indeterminate="false"><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">data7</span></label></div></div><!--]--></div><h4 class="title">Disabled Group</h4><div class="devui-checkbox__group is-row"><!--[--><div class="" style=""><div class="devui-checkbox active disabled"><label title class="devui-checkbox--md" style="width:auto;"><input name="data1" class="devui-checkbox__input" type="checkbox" indeterminate="false" checked disabled><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">data1</span></label></div></div><div class="" style=""><div class="devui-checkbox active disabled"><label title class="devui-checkbox--md" style="width:auto;"><input name="data2" class="devui-checkbox__input" type="checkbox" indeterminate="false" checked disabled><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">data2</span></label></div></div><div class="" style=""><div class="devui-checkbox disabled unchecked"><label title class="devui-checkbox--md" style="width:auto;"><input name="data3" class="devui-checkbox__input" type="checkbox" indeterminate="false" disabled><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">data3</span></label></div></div><div class="" style=""><div class="devui-checkbox disabled unchecked"><label title class="devui-checkbox--md" style="width:auto;"><input name="data4" class="devui-checkbox__input" type="checkbox" indeterminate="false" disabled><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">data4</span></label></div></div><div class="" style=""><div class="devui-checkbox disabled unchecked"><label title class="devui-checkbox--md" style="width:auto;"><input name="data5" class="devui-checkbox__input" type="checkbox" indeterminate="false" disabled><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">data5</span></label></div></div><div class="" style=""><div class="devui-checkbox disabled unchecked"><label title class="devui-checkbox--md" style="width:auto;"><input name="data6" class="devui-checkbox__input" type="checkbox" indeterminate="false" disabled><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">data6</span></label></div></div><div class="" style=""><div class="devui-checkbox disabled unchecked"><label title class="devui-checkbox--md" style="width:auto;"><input name="data7" class="devui-checkbox__input" type="checkbox" indeterminate="false" disabled><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">data7</span></label></div></div><!--]--></div><h4 class="title">Custom Selected Color</h4><div class="devui-checkbox__group is-row"><!--[--><div class="" style=""><div class="devui-checkbox active"><label title class="devui-checkbox--md" style="width:auto;"><input name="data1" class="devui-checkbox__input" type="checkbox" indeterminate="false" checked><span style="border-color:RGB(255, 193, 7);background-image:linear-gradient(RGB(255, 193, 7), RGB(255, 193, 7));" class="devui-checkbox__material custom-color devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">data1</span></label></div></div><div class="" style=""><div class="devui-checkbox active"><label title class="devui-checkbox--md" style="width:auto;"><input name="data2" class="devui-checkbox__input" type="checkbox" indeterminate="false" checked><span style="border-color:RGB(255, 193, 7);background-image:linear-gradient(RGB(255, 193, 7), RGB(255, 193, 7));" class="devui-checkbox__material custom-color devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">data2</span></label></div></div><div class="" style=""><div class="devui-checkbox unchecked"><label title class="devui-checkbox--md" style="width:auto;"><input name="data3" class="devui-checkbox__input" type="checkbox" indeterminate="false"><span style="background-image:linear-gradient(RGB(255, 193, 7), RGB(255, 193, 7));" class="devui-checkbox__material custom-color devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">data3</span></label></div></div><div class="" style=""><div class="devui-checkbox unchecked"><label title class="devui-checkbox--md" style="width:auto;"><input name="data4" class="devui-checkbox__input" type="checkbox" indeterminate="false"><span style="background-image:linear-gradient(RGB(255, 193, 7), RGB(255, 193, 7));" class="devui-checkbox__material custom-color devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">data4</span></label></div></div><div class="" style=""><div class="devui-checkbox unchecked"><label title class="devui-checkbox--md" style="width:auto;"><input name="data5" class="devui-checkbox__input" type="checkbox" indeterminate="false"><span style="background-image:linear-gradient(RGB(255, 193, 7), RGB(255, 193, 7));" class="devui-checkbox__material custom-color devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">data5</span></label></div></div><div class="" style=""><div class="devui-checkbox unchecked"><label title class="devui-checkbox--md" style="width:auto;"><input name="data6" class="devui-checkbox__input" type="checkbox" indeterminate="false"><span style="background-image:linear-gradient(RGB(255, 193, 7), RGB(255, 193, 7));" class="devui-checkbox__material custom-color devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">data6</span></label></div></div><div class="" style=""><div class="devui-checkbox unchecked"><label title class="devui-checkbox--md" style="width:auto;"><input name="data7" class="devui-checkbox__input" type="checkbox" indeterminate="false"><span style="background-image:linear-gradient(RGB(255, 193, 7), RGB(255, 193, 7));" class="devui-checkbox__material custom-color devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">data7</span></label></div></div><!--]--></div><h4 class="title">Set showAnimation false</h4><div class="devui-checkbox__group is-row"><!--[--><div class="" style=""><div class="devui-checkbox unchecked"><label title class="devui-checkbox--md" style="width:auto;"><input name="data1" class="devui-checkbox__input" type="checkbox" indeterminate="false"><span style="" class="devui-checkbox__material devui-checkbox--no-animation devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick devui-checkbox--no-animation"></polygon></g></svg></span><span class="devui-checkbox__label-text">data1</span></label></div></div><div class="" style=""><div class="devui-checkbox active"><label title class="devui-checkbox--md" style="width:auto;"><input name="data2" class="devui-checkbox__input" type="checkbox" indeterminate="false" checked><span style="" class="devui-checkbox__material devui-checkbox--no-animation devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick devui-checkbox--no-animation"></polygon></g></svg></span><span class="devui-checkbox__label-text">data2</span></label></div></div><div class="" style=""><div class="devui-checkbox active"><label title class="devui-checkbox--md" style="width:auto;"><input name="data3" class="devui-checkbox__input" type="checkbox" indeterminate="false" checked><span style="" class="devui-checkbox__material devui-checkbox--no-animation devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick devui-checkbox--no-animation"></polygon></g></svg></span><span class="devui-checkbox__label-text">data3</span></label></div></div><div class="" style=""><div class="devui-checkbox unchecked"><label title class="devui-checkbox--md" style="width:auto;"><input name="data4" class="devui-checkbox__input" type="checkbox" indeterminate="false"><span style="" class="devui-checkbox__material devui-checkbox--no-animation devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick devui-checkbox--no-animation"></polygon></g></svg></span><span class="devui-checkbox__label-text">data4</span></label></div></div><div class="" style=""><div class="devui-checkbox unchecked"><label title class="devui-checkbox--md" style="width:auto;"><input name="data5" class="devui-checkbox__input" type="checkbox" indeterminate="false"><span style="" class="devui-checkbox__material devui-checkbox--no-animation devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick devui-checkbox--no-animation"></polygon></g></svg></span><span class="devui-checkbox__label-text">data5</span></label></div></div><div class="" style=""><div class="devui-checkbox unchecked"><label title class="devui-checkbox--md" style="width:auto;"><input name="data6" class="devui-checkbox__input" type="checkbox" indeterminate="false"><span style="" class="devui-checkbox__material devui-checkbox--no-animation devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick devui-checkbox--no-animation"></polygon></g></svg></span><span class="devui-checkbox__label-text">data6</span></label></div></div><div class="" style=""><div class="devui-checkbox unchecked"><label title class="devui-checkbox--md" style="width:auto;"><input name="data7" class="devui-checkbox__input" type="checkbox" indeterminate="false"><span style="" class="devui-checkbox__material devui-checkbox--no-animation devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick devui-checkbox--no-animation"></polygon></g></svg></span><span class="devui-checkbox__label-text">data7</span></label></div></div><!--]--></div><h4 class="title">Multi-line Checkbox</h4><div class="devui-checkbox__group is-row"><!--[--><div class="devui-checkbox__wrap" style="width:94px;"><div class="devui-checkbox unchecked"><label title class="devui-checkbox--md" style="width:100%;"><input name="data00000000000000001" class="devui-checkbox__input" type="checkbox" indeterminate="false"><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">data00000000000000001</span></label></div></div><div class="devui-checkbox__wrap" style="width:94px;"><div class="devui-checkbox active"><label title class="devui-checkbox--md" style="width:100%;"><input name="data2" class="devui-checkbox__input" type="checkbox" indeterminate="false" checked><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">data2</span></label></div></div><div class="devui-checkbox__wrap" style="width:94px;"><div class="devui-checkbox active"><label title class="devui-checkbox--md" style="width:100%;"><input name="data3" class="devui-checkbox__input" type="checkbox" indeterminate="false" checked><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">data3</span></label></div></div><div class="devui-checkbox__wrap" style="width:94px;"><div class="devui-checkbox unchecked"><label title class="devui-checkbox--md" style="width:100%;"><input name="data4" class="devui-checkbox__input" type="checkbox" indeterminate="false"><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">data4</span></label></div></div><div class="devui-checkbox__wrap" style="width:94px;"><div class="devui-checkbox unchecked"><label title class="devui-checkbox--md" style="width:100%;"><input name="data5" class="devui-checkbox__input" type="checkbox" indeterminate="false"><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">data5</span></label></div></div><div class="devui-checkbox__wrap" style="width:94px;"><div class="devui-checkbox unchecked"><label title class="devui-checkbox--md" style="width:100%;"><input name="data6" class="devui-checkbox__input" type="checkbox" indeterminate="false"><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">data6</span></label></div></div><div class="devui-checkbox__wrap" style="width:94px;"><div class="devui-checkbox unchecked"><label title class="devui-checkbox--md" style="width:100%;"><input name="data7" class="devui-checkbox__input" type="checkbox" indeterminate="false"><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">data7</span></label></div></div><div class="devui-checkbox__wrap" style="width:94px;"><div class="devui-checkbox unchecked"><label title class="devui-checkbox--md" style="width:100%;"><input name="data8" class="devui-checkbox__input" type="checkbox" indeterminate="false"><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">data8</span></label></div></div><div class="devui-checkbox__wrap" style="width:94px;"><div class="devui-checkbox unchecked"><label title class="devui-checkbox--md" style="width:100%;"><input name="data9" class="devui-checkbox__input" type="checkbox" indeterminate="false"><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">data9</span></label></div></div><div class="devui-checkbox__wrap" style="width:94px;"><div class="devui-checkbox unchecked"><label title class="devui-checkbox--md" style="width:100%;"><input name="data10" class="devui-checkbox__input" type="checkbox" indeterminate="false"><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">data10</span></label></div></div><div class="devui-checkbox__wrap" style="width:94px;"><div class="devui-checkbox unchecked"><label title class="devui-checkbox--md" style="width:100%;"><input name="data11" class="devui-checkbox__input" type="checkbox" indeterminate="false"><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">data11</span></label></div></div><div class="devui-checkbox__wrap" style="width:94px;"><div class="devui-checkbox unchecked"><label title class="devui-checkbox--md" style="width:100%;"><input name="data12" class="devui-checkbox__input" type="checkbox" indeterminate="false"><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">data12</span></label></div></div><div class="devui-checkbox__wrap" style="width:94px;"><div class="devui-checkbox unchecked"><label title class="devui-checkbox--md" style="width:100%;"><input name="data13" class="devui-checkbox__input" type="checkbox" indeterminate="false"><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">data13</span></label></div></div><div class="devui-checkbox__wrap" style="width:94px;"><div class="devui-checkbox unchecked"><label title class="devui-checkbox--md" style="width:100%;"><input name="data14" class="devui-checkbox__input" type="checkbox" indeterminate="false"><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">data14</span></label></div></div><div class="devui-checkbox__wrap" style="width:94px;"><div class="devui-checkbox unchecked"><label title class="devui-checkbox--md" style="width:100%;"><input name="data15" class="devui-checkbox__input" type="checkbox" indeterminate="false"><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">data15</span></label></div></div><!--]--></div><h4 class="title">可选项目数量的限制</h4><div class="devui-checkbox__group is-row"><!--[--><div class="devui-checkbox__wrap" style="width:94px;"><div class="devui-checkbox unchecked"><label title class="devui-checkbox--md" style="width:100%;"><input name="data00000000000000001" class="devui-checkbox__input" type="checkbox" indeterminate="false"><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">data00000000000000001</span></label></div></div><div class="devui-checkbox__wrap" style="width:94px;"><div class="devui-checkbox active"><label title class="devui-checkbox--md" style="width:100%;"><input name="data2" class="devui-checkbox__input" type="checkbox" indeterminate="false" checked><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">data2</span></label></div></div><div class="devui-checkbox__wrap" style="width:94px;"><div class="devui-checkbox active"><label title class="devui-checkbox--md" style="width:100%;"><input name="data3" class="devui-checkbox__input" type="checkbox" indeterminate="false" checked><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">data3</span></label></div></div><div class="devui-checkbox__wrap" style="width:94px;"><div class="devui-checkbox unchecked"><label title class="devui-checkbox--md" style="width:100%;"><input name="data4" class="devui-checkbox__input" type="checkbox" indeterminate="false"><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">data4</span></label></div></div><div class="devui-checkbox__wrap" style="width:94px;"><div class="devui-checkbox unchecked"><label title class="devui-checkbox--md" style="width:100%;"><input name="data5" class="devui-checkbox__input" type="checkbox" indeterminate="false"><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">data5</span></label></div></div><div class="devui-checkbox__wrap" style="width:94px;"><div class="devui-checkbox unchecked"><label title class="devui-checkbox--md" style="width:100%;"><input name="data6" class="devui-checkbox__input" type="checkbox" indeterminate="false"><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">data6</span></label></div></div><div class="devui-checkbox__wrap" style="width:94px;"><div class="devui-checkbox unchecked"><label title class="devui-checkbox--md" style="width:100%;"><input name="data7" class="devui-checkbox__input" type="checkbox" indeterminate="false"><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">data7</span></label></div></div><div class="devui-checkbox__wrap" style="width:94px;"><div class="devui-checkbox unchecked"><label title class="devui-checkbox--md" style="width:100%;"><input name="data8" class="devui-checkbox__input" type="checkbox" indeterminate="false"><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">data8</span></label></div></div><div class="devui-checkbox__wrap" style="width:94px;"><div class="devui-checkbox unchecked"><label title class="devui-checkbox--md" style="width:100%;"><input name="data9" class="devui-checkbox__input" type="checkbox" indeterminate="false"><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">data9</span></label></div></div><div class="devui-checkbox__wrap" style="width:94px;"><div class="devui-checkbox unchecked"><label title class="devui-checkbox--md" style="width:100%;"><input name="data10" class="devui-checkbox__input" type="checkbox" indeterminate="false"><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">data10</span></label></div></div><div class="devui-checkbox__wrap" style="width:94px;"><div class="devui-checkbox unchecked"><label title class="devui-checkbox--md" style="width:100%;"><input name="data11" class="devui-checkbox__input" type="checkbox" indeterminate="false"><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">data11</span></label></div></div><div class="devui-checkbox__wrap" style="width:94px;"><div class="devui-checkbox unchecked"><label title class="devui-checkbox--md" style="width:100%;"><input name="data12" class="devui-checkbox__input" type="checkbox" indeterminate="false"><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">data12</span></label></div></div><div class="devui-checkbox__wrap" style="width:94px;"><div class="devui-checkbox unchecked"><label title class="devui-checkbox--md" style="width:100%;"><input name="data13" class="devui-checkbox__input" type="checkbox" indeterminate="false"><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">data13</span></label></div></div><div class="devui-checkbox__wrap" style="width:94px;"><div class="devui-checkbox unchecked"><label title class="devui-checkbox--md" style="width:100%;"><input name="data14" class="devui-checkbox__input" type="checkbox" indeterminate="false"><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">data14</span></label></div></div><div class="devui-checkbox__wrap" style="width:94px;"><div class="devui-checkbox unchecked"><label title class="devui-checkbox--md" style="width:100%;"><input name="data15" class="devui-checkbox__input" type="checkbox" indeterminate="false"><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">data15</span></label></div></div><!--]--></div><h4 class="title">插槽方式</h4><div class="devui-checkbox__group is-row"><!--[--><!--[--><div class="devui-checkbox__wrap" style="width:94px;"><div class="devui-checkbox unchecked"><label title class="devui-checkbox--md" style="width:100%;"><input name="1" class="devui-checkbox__input" type="checkbox" indeterminate="false"><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">data1</span></label></div></div><div class="devui-checkbox__wrap" style="width:94px;"><div class="devui-checkbox active"><label title class="devui-checkbox--md" style="width:100%;"><input name="2" class="devui-checkbox__input" type="checkbox" indeterminate="false" checked><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">data2</span></label></div></div><div class="devui-checkbox__wrap" style="width:94px;"><div class="devui-checkbox active"><label title class="devui-checkbox--md" style="width:100%;"><input name="3" class="devui-checkbox__input" type="checkbox" indeterminate="false" checked><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">data3</span></label></div></div><!--]--><!--]--></div></div></div><!--]--></div><div class="meta" data-v-2b1aa91d><!----><div class="highlight" data-v-2b1aa91d><!--[--><div class="language-vue"><pre><code>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>checkbox-group-demo<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h4</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>title<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Input Object Array<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h4</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-checkbox-group</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>values1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:options</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>options1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">direction</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-checkbox-group</span><span class="token punctuation">&gt;</span></span>

    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h4</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>title<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Input String Array<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h4</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-checkbox-group</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>values2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:options</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>options2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:isShowTitle</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span> <span class="token attr-name">direction</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-checkbox-group</span><span class="token punctuation">&gt;</span></span>

    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h4</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>title<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Disabled Group<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h4</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-checkbox-group</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>values2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:options</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>options2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:isShowTitle</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span> <span class="token attr-name">direction</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:disabled</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>true<span class="token punctuation">&quot;</span></span>
    <span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-checkbox-group</span><span class="token punctuation">&gt;</span></span>

    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h4</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>title<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Custom Selected Color<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h4</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-checkbox-group</span>
      <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>values3<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">:options</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>options3<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">:isShowTitle</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">direction</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>RGB(255, 193, 7)<span class="token punctuation">&quot;</span></span>
    <span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-checkbox-group</span><span class="token punctuation">&gt;</span></span>

    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h4</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>title<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Set showAnimation false<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h4</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-checkbox-group</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>values4<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:options</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>options3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:isShowTitle</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span> <span class="token attr-name">direction</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:showAnimation</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span>
    <span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-checkbox-group</span><span class="token punctuation">&gt;</span></span>

    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h4</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>title<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Multi-line Checkbox<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h4</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-checkbox-group</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>values5<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:options</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>options5<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:isShowTitle</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span> <span class="token attr-name">direction</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:itemWidth</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>94<span class="token punctuation">&quot;</span></span>
    <span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-checkbox-group</span><span class="token punctuation">&gt;</span></span>

    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h4</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>title<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>可选项目数量的限制<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h4</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-checkbox-group</span>
      <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>values6<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">:options</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>options5<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">:isShowTitle</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">direction</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">:itemWidth</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>94<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">:max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span>
    <span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-checkbox-group</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h4</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>title<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>插槽方式<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h4</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-checkbox-group</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>values7<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:isShowTitle</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span> <span class="token attr-name">direction</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:itemWidth</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>94<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-checkbox</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item in options1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item.value<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item.name<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item.value<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-checkbox</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-checkbox-group</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> <span class="token punctuation">{</span> defineComponent<span class="token punctuation">,</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> options1 <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
      <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;data1&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">disabled</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&#39;1&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;data2&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&#39;2&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">2</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;data3&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&#39;3&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">3</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> values1 <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;data2&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&#39;2&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">2</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> options2 <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">&#39;data1&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;data2&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;data3&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;data4&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;data5&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;data6&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;data7&#39;</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> values2 <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">&#39;data1&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;data2&#39;</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> options3 <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">&#39;data1&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;data2&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;data3&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;data4&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;data5&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;data6&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;data7&#39;</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> values3 <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">&#39;data1&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;data2&#39;</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> values4 <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">&#39;data2&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;data3&#39;</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> options5 <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
      <span class="token string">&#39;data00000000000000001&#39;</span><span class="token punctuation">,</span>
      <span class="token string">&#39;data2&#39;</span><span class="token punctuation">,</span>
      <span class="token string">&#39;data3&#39;</span><span class="token punctuation">,</span>
      <span class="token string">&#39;data4&#39;</span><span class="token punctuation">,</span>
      <span class="token string">&#39;data5&#39;</span><span class="token punctuation">,</span>
      <span class="token string">&#39;data6&#39;</span><span class="token punctuation">,</span>
      <span class="token string">&#39;data7&#39;</span><span class="token punctuation">,</span>
      <span class="token string">&#39;data8&#39;</span><span class="token punctuation">,</span>
      <span class="token string">&#39;data9&#39;</span><span class="token punctuation">,</span>
      <span class="token string">&#39;data10&#39;</span><span class="token punctuation">,</span>
      <span class="token string">&#39;data11&#39;</span><span class="token punctuation">,</span>
      <span class="token string">&#39;data12&#39;</span><span class="token punctuation">,</span>
      <span class="token string">&#39;data13&#39;</span><span class="token punctuation">,</span>
      <span class="token string">&#39;data14&#39;</span><span class="token punctuation">,</span>
      <span class="token string">&#39;data15&#39;</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> values5 <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">&#39;data2&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;data3&#39;</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> values6 <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">&#39;data2&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;data3&#39;</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> values7 <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">&#39;2&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;3&#39;</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      options1<span class="token punctuation">,</span>
      values1<span class="token punctuation">,</span>
      options2<span class="token punctuation">,</span>
      values2<span class="token punctuation">,</span>
      options3<span class="token punctuation">,</span>
      values3<span class="token punctuation">,</span>
      values4<span class="token punctuation">,</span>
      options5<span class="token punctuation">,</span>
      values5<span class="token punctuation">,</span>
      values6<span class="token punctuation">,</span>
      values7<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
<span class="token selector">.checkbox-group-demo .title</span> <span class="token punctuation">{</span>
  <span class="token property">margin</span><span class="token punctuation">:</span> 20px 0<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><!--]--></div></div><!--]--><div class="demo-block-control" data-v-2b1aa91d><i class="control-icon icon-caret-down" data-v-2b1aa91d></i><span style="display:none;" class="control-text" data-v-2b1aa91d>显示代码</span><div class="control-button-wrap" data-v-2b1aa91d><span style="display:none;" class="control-button copy-button" data-v-2b1aa91d>复制代码片段</span></div></div></div><h3 id="尺寸和边框" tabindex="-1">尺寸和边框 <a class="header-anchor" href="#尺寸和边框" aria-hidden="true">#</a></h3><div class="demo-block demo-index" data-v-2b1aa91d><!--[--><div class="source" data-v-2b1aa91d><!--[--><div><h4>Small</h4><div class="devui-checkbox__group is-row"><!--[--><div class="" style="" id="1"><div class="devui-checkbox active"><label title="Summer" class="devui-checkbox--sm devui-checkbox--bordered" style="width:auto;"><input name="Summer" class="devui-checkbox__input" type="checkbox" indeterminate="false" checked><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">Summer</span></label></div></div><div class="" style="" id="2"><div class="devui-checkbox disabled unchecked"><label title="Spring" class="devui-checkbox--sm devui-checkbox--bordered" style="width:auto;"><input name="Spring" class="devui-checkbox__input" type="checkbox" indeterminate="false" disabled><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">Spring</span></label></div></div><!--]--></div><h4>Middle</h4><div class="devui-checkbox__group is-row"><!--[--><div class="" style="" id="1"><div class="devui-checkbox active"><label title="Summer" class="devui-checkbox--md devui-checkbox--bordered" style="width:auto;"><input name="Summer" class="devui-checkbox__input" type="checkbox" indeterminate="false" checked><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">Summer</span></label></div></div><div class="" style="" id="2"><div class="devui-checkbox disabled unchecked"><label title="Spring" class="devui-checkbox--md devui-checkbox--bordered" style="width:auto;"><input name="Spring" class="devui-checkbox__input" type="checkbox" indeterminate="false" disabled><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">Spring</span></label></div></div><!--]--></div><h4>Large</h4><div class="devui-checkbox__group is-row"><!--[--><div class="" style="" id="1"><div class="devui-checkbox active"><label title="Summer" class="devui-checkbox--lg devui-checkbox--bordered" style="width:auto;"><input name="Summer" class="devui-checkbox__input" type="checkbox" indeterminate="false" checked><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">Summer</span></label></div></div><div class="" style="" id="2"><div class="devui-checkbox disabled unchecked"><label title="Spring" class="devui-checkbox--lg devui-checkbox--bordered" style="width:auto;"><input name="Spring" class="devui-checkbox__input" type="checkbox" indeterminate="false" disabled><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">Spring</span></label></div></div><!--]--></div></div><!--]--></div><div class="meta" data-v-2b1aa91d><!----><div class="highlight" data-v-2b1aa91d><!--[--><div class="language-vue"><pre><code>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h4</span><span class="token punctuation">&gt;</span></span>Small<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h4</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-checkbox-group</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>borderSizeValues1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:options</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>borderSizeOptions1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">direction</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>sm<span class="token punctuation">&quot;</span></span> <span class="token attr-name">border</span>
  <span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-checkbox-group</span><span class="token punctuation">&gt;</span></span>

  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h4</span><span class="token punctuation">&gt;</span></span>Middle<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h4</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-checkbox-group</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>borderSizeValues2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:options</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>borderSizeOptions1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">direction</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>md<span class="token punctuation">&quot;</span></span> <span class="token attr-name">border</span>
  <span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-checkbox-group</span><span class="token punctuation">&gt;</span></span>

  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h4</span><span class="token punctuation">&gt;</span></span>Large<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h4</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-checkbox-group</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>borderSizeValues3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:options</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>borderSizeOptions1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">direction</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">border</span>
  <span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-checkbox-group</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> <span class="token punctuation">{</span> defineComponent<span class="token punctuation">,</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> borderSizeOptions1 <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
      <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Summer&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&#39;1&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Spring&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">disabled</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&#39;2&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">2</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> borderSizeValues1 <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Summer&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&#39;1&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> borderSizeValues2 <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Summer&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&#39;1&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> borderSizeValues3 <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Summer&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&#39;1&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      borderSizeValues1<span class="token punctuation">,</span>
      borderSizeValues2<span class="token punctuation">,</span>
      borderSizeValues3<span class="token punctuation">,</span>
      borderSizeOptions1<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><!--]--></div></div><!--]--><div class="demo-block-control" data-v-2b1aa91d><i class="control-icon icon-caret-down" data-v-2b1aa91d></i><span style="display:none;" class="control-text" data-v-2b1aa91d>显示代码</span><div class="control-button-wrap" data-v-2b1aa91d><span style="display:none;" class="control-button copy-button" data-v-2b1aa91d>复制代码片段</span></div></div></div><h3 id="按钮形态" tabindex="-1">按钮形态 <a class="header-anchor" href="#按钮形态" aria-hidden="true">#</a></h3><p>需要把 <code>d-checkbox</code> 替换成 <code>d-checkbox-button</code>， 数组源可为普通数组、对象数组等。</p><div class="demo-block demo-index" data-v-2b1aa91d><!--[--><div class="source" data-v-2b1aa91d><!--[--><div><h4>禁用</h4><div class="devui-checkbox__group is-row"><!--[--><!--[--><label title="选项1" class="devui-checkbox-button active disabled"><input name="2" class="devui-checkbox-button__input" type="checkbox" checked disabled><span style="" class="devui-checkbox-button__content devui-checkbox-button--sm">选项1</span></label><label title="选项2" class="devui-checkbox-button unchecked"><input name="3" class="devui-checkbox-button__input" type="checkbox"><span style="" class="devui-checkbox-button__content devui-checkbox-button--sm">选项2</span></label><label title="选项3" class="devui-checkbox-button unchecked"><input name="4" class="devui-checkbox-button__input" type="checkbox"><span style="" class="devui-checkbox-button__content devui-checkbox-button--sm">选项3</span></label><!--]--><!--]--></div><h4>默认</h4><div class="devui-checkbox__group is-row"><!--[--><!--[--><label title="选项1" class="devui-checkbox-button active"><input name="2" class="devui-checkbox-button__input" type="checkbox" checked><span style="" class="devui-checkbox-button__content devui-checkbox-button--md">选项1</span></label><label title="选项2" class="devui-checkbox-button unchecked"><input name="3" class="devui-checkbox-button__input" type="checkbox"><span style="" class="devui-checkbox-button__content devui-checkbox-button--md">选项2</span></label><label title="选项3" class="devui-checkbox-button unchecked"><input name="4" class="devui-checkbox-button__input" type="checkbox"><span style="" class="devui-checkbox-button__content devui-checkbox-button--md">选项3</span></label><!--]--><!--]--></div><h4>自定义填充颜色、文字颜色</h4><div class="devui-checkbox__group is-row"><!--[--><!--[--><label title="自定义title1" class="devui-checkbox-button active"><input name="2" class="devui-checkbox-button__input" type="checkbox" checked><span style="border-color:#FA9841;background-color:#FA9841;color:#fff;" class="devui-checkbox-button__content devui-checkbox-button--lg">选项1</span></label><label title="自定义title2" class="devui-checkbox-button unchecked"><input name="3" class="devui-checkbox-button__input" type="checkbox"><span style="" class="devui-checkbox-button__content devui-checkbox-button--lg">选项2</span></label><label title="自定义title3" class="devui-checkbox-button unchecked"><input name="4" class="devui-checkbox-button__input" type="checkbox"><span style="" class="devui-checkbox-button__content devui-checkbox-button--lg">选项3</span></label><!--]--><!--]--></div></div><!--]--></div><div class="meta" data-v-2b1aa91d><!----><div class="highlight" data-v-2b1aa91d><!--[--><div class="language-vue"><pre><code>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h4</span><span class="token punctuation">&gt;</span></span>禁用<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h4</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-checkbox-group</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>buttonValues1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>sm<span class="token punctuation">&quot;</span></span> <span class="token attr-name">direction</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-checkbox-button</span>
      <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item in buttonOptions1<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">:label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item.label<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item.value<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item.value<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">:disabled</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item.disabled<span class="token punctuation">&quot;</span></span>
    <span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-checkbox-button</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-checkbox-group</span><span class="token punctuation">&gt;</span></span>

  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h4</span><span class="token punctuation">&gt;</span></span>默认<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h4</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-checkbox-group</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>buttonValues2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">direction</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-checkbox-button</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item in buttonOptions1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item.label<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item.value<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item.value<span class="token punctuation">&quot;</span></span>
    <span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-checkbox-button</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-checkbox-group</span><span class="token punctuation">&gt;</span></span>

  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h4</span><span class="token punctuation">&gt;</span></span>自定义填充颜色、文字颜色<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h4</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-checkbox-group</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>buttonValues3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">is-show-title</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#FA9841<span class="token punctuation">&quot;</span></span> <span class="token attr-name">text-color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#fff<span class="token punctuation">&quot;</span></span> <span class="token attr-name">direction</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-checkbox-button</span>
      <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item in buttonOptions1<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">:label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item.label<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item.value<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item.value<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">:title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item.title<span class="token punctuation">&quot;</span></span>
    <span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-checkbox-button</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-checkbox-group</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> <span class="token punctuation">{</span> defineComponent<span class="token punctuation">,</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> buttonOptions1 <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
      <span class="token punctuation">{</span> <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;选项1&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">disabled</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;自定义title1&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span> <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;选项2&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;自定义title2&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span> <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;选项3&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;自定义title3&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> buttonValues1 <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> buttonValues2 <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> buttonValues3 <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      buttonValues1<span class="token punctuation">,</span>
      buttonValues2<span class="token punctuation">,</span>
      buttonValues3<span class="token punctuation">,</span>
      buttonOptions1<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><!--]--></div></div><!--]--><div class="demo-block-control" data-v-2b1aa91d><i class="control-icon icon-caret-down" data-v-2b1aa91d></i><span style="display:none;" class="control-text" data-v-2b1aa91d>显示代码</span><div class="control-button-wrap" data-v-2b1aa91d><span style="display:none;" class="control-button copy-button" data-v-2b1aa91d>复制代码片段</span></div></div></div><h3 id="checkbox-根据条件终止切换状态" tabindex="-1">checkbox 根据条件终止切换状态 <a class="header-anchor" href="#checkbox-根据条件终止切换状态" aria-hidden="true">#</a></h3><p>根据条件判断，label 为&#39;条件判断回调禁止选中&#39;的 checkbox 终止切换状态。</p><div class="demo-block demo-index" data-v-2b1aa91d><!--[--><div class="source" data-v-2b1aa91d><!--[--><div><div style="margin-bottom:10px;"><div class="" style=""><div class="devui-checkbox active"><label title class="devui-checkbox--md" style="width:auto;"><input class="devui-checkbox__input" type="checkbox" indeterminate="false" checked><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">Conditional Callback Allowed</span></label></div></div></div><div><div class="" style=""><div class="devui-checkbox unchecked"><label title class="devui-checkbox--md" style="width:auto;"><input class="devui-checkbox__input" type="checkbox" indeterminate="false"><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">Conditional Judgment Callback Interception Selected</span></label></div></div></div></div><!--]--></div><div class="meta" data-v-2b1aa91d><!----><div class="highlight" data-v-2b1aa91d><!--[--><div class="language-vue"><pre><code>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">margin-bottom</span><span class="token punctuation">:</span> 10px</span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-checkbox</span>
      <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Conditional Callback Allowed<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">:isShowTitle</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>checkboxChecked1<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">@change</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>onCheckboxEndChange<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">:beforeChange</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>endBeforeChange<span class="token punctuation">&quot;</span></span>
    <span class="token punctuation">/&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-checkbox</span>
      <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Conditional Judgment Callback Interception Selected<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">:isShowTitle</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>checkboxChecked2<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">@change</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>onCheckboxEndChange<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">:beforeChange</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>endBeforeChange<span class="token punctuation">&quot;</span></span>
    <span class="token punctuation">/&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> <span class="token punctuation">{</span> defineComponent<span class="token punctuation">,</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> checkboxChecked1 <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> checkboxChecked2 <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token keyword">const</span> <span class="token function-variable function">onCheckboxEndChange</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;checkbox1 checked:&#39;</span><span class="token punctuation">,</span> value<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>

    <span class="token keyword">const</span> <span class="token function-variable function">endBeforeChange</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">isChecked<span class="token punctuation">,</span> label</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token keyword">return</span> label <span class="token operator">===</span> <span class="token string">&#39;Conditional Callback Allowed&#39;</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      checkboxChecked1<span class="token punctuation">,</span>
      checkboxChecked2<span class="token punctuation">,</span>
      onCheckboxEndChange<span class="token punctuation">,</span>
      endBeforeChange<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><!--]--></div></div><!--]--><div class="demo-block-control" data-v-2b1aa91d><i class="control-icon icon-caret-down" data-v-2b1aa91d></i><span style="display:none;" class="control-text" data-v-2b1aa91d>显示代码</span><div class="control-button-wrap" data-v-2b1aa91d><span style="display:none;" class="control-button copy-button" data-v-2b1aa91d>复制代码片段</span></div></div></div><h3 id="checkbox-group-根据条件终止切换状态" tabindex="-1">checkbox-group 根据条件终止切换状态 <a class="header-anchor" href="#checkbox-group-根据条件终止切换状态" aria-hidden="true">#</a></h3><p>选项包含&#39;拦截&#39;字段的 checkbox 无法切换状态。</p><div class="demo-block demo-index" data-v-2b1aa91d><!--[--><div class="source" data-v-2b1aa91d><!--[--><div><div><div class="devui-checkbox__group is-row"><!--[--><div class="" style=""><div class="devui-checkbox unchecked"><label title class="devui-checkbox--md" style="width:auto;"><input name="data1" class="devui-checkbox__input" type="checkbox" indeterminate="false"><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">data1</span></label></div></div><div class="" style=""><div class="devui-checkbox active"><label title class="devui-checkbox--md" style="width:auto;"><input name="data2" class="devui-checkbox__input" type="checkbox" indeterminate="false" checked><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">data2</span></label></div></div><div class="" style=""><div class="devui-checkbox active"><label title class="devui-checkbox--md" style="width:auto;"><input name="intercept" class="devui-checkbox__input" type="checkbox" indeterminate="false" checked><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">intercept</span></label></div></div><div class="" style=""><div class="devui-checkbox unchecked"><label title class="devui-checkbox--md" style="width:auto;"><input name="intercept2" class="devui-checkbox__input" type="checkbox" indeterminate="false"><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">intercept2</span></label></div></div><div class="" style=""><div class="devui-checkbox unchecked"><label title class="devui-checkbox--md" style="width:auto;"><input name="data5" class="devui-checkbox__input" type="checkbox" indeterminate="false"><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">data5</span></label></div></div><div class="" style=""><div class="devui-checkbox unchecked"><label title class="devui-checkbox--md" style="width:auto;"><input name="data6" class="devui-checkbox__input" type="checkbox" indeterminate="false"><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">data6</span></label></div></div><div class="" style=""><div class="devui-checkbox unchecked"><label title class="devui-checkbox--md" style="width:auto;"><input name="data7" class="devui-checkbox__input" type="checkbox" indeterminate="false"><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">data7</span></label></div></div><!--]--></div></div></div><!--]--></div><div class="meta" data-v-2b1aa91d><!----><div class="highlight" data-v-2b1aa91d><!--[--><div class="language-vue"><pre><code>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-checkbox-group</span>
      <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>interceptValues<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">:options</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>interceptOptions<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">:isShowTitle</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">direction</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">@change</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>onCheckboxInterceptChange<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">:beforeChange</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>interceptBeforeChange<span class="token punctuation">&quot;</span></span>
    <span class="token punctuation">/&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> <span class="token punctuation">{</span> defineComponent<span class="token punctuation">,</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> interceptOptions <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">&#39;data1&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;data2&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;intercept&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;intercept2&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;data5&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;data6&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;data7&#39;</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> interceptValues <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">&#39;data2&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;intercept&#39;</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> <span class="token function-variable function">onCheckboxInterceptChange</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;checkbox1 checked:&#39;</span><span class="token punctuation">,</span> value<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>

    <span class="token keyword">const</span> <span class="token function-variable function">interceptBeforeChange</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">isChecked<span class="token punctuation">,</span> label</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token keyword">return</span> <span class="token operator">!</span>label<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span><span class="token string">&#39;intercept&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>

    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      interceptOptions<span class="token punctuation">,</span>
      interceptValues<span class="token punctuation">,</span>
      onCheckboxInterceptChange<span class="token punctuation">,</span>
      interceptBeforeChange<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><!--]--></div></div><!--]--><div class="demo-block-control" data-v-2b1aa91d><i class="control-icon icon-caret-down" data-v-2b1aa91d></i><span style="display:none;" class="control-text" data-v-2b1aa91d>显示代码</span><div class="control-button-wrap" data-v-2b1aa91d><span style="display:none;" class="control-button copy-button" data-v-2b1aa91d>复制代码片段</span></div></div></div><h3 id="checkbox-参数" tabindex="-1">Checkbox 参数 <a class="header-anchor" href="#checkbox-参数" aria-hidden="true">#</a></h3><table><thead><tr><th style="text-align:left;">参数</th><th style="text-align:left;">类型</th><th style="text-align:left;">默认</th><th style="text-align:left;">说明</th><th>跳转 Demo</th></tr></thead><tbody><tr><td style="text-align:left;">name</td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">--</td><td style="text-align:left;">可选，表单域名，input 原生 name 属性</td><td><a href="#%E5%9F%BA%E6%9C%AC%E7%94%A8%E6%B3%95">基本用法</a></td></tr><tr><td style="text-align:left;">label</td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">--</td><td style="text-align:left;">可选，显示标签</td><td><a href="#%E5%9F%BA%E6%9C%AC%E7%94%A8%E6%B3%95">基本用法</a></td></tr><tr><td style="text-align:left;">value</td><td style="text-align:left;"><code>string|number</code></td><td style="text-align:left;">--</td><td style="text-align:left;">可选，选中状态的值（只有在 checkbox-group 或者绑定对象为 array 时有效）</td><td><a href="#%E4%BD%BF%E7%94%A8-checkboxgroup">使用 CheckBoxGroup</a></td></tr><tr><td style="text-align:left;">half-checked</td><td style="text-align:left;"><code>boolean</code></td><td style="text-align:left;">false</td><td style="text-align:left;">可选，半选状态</td><td><a href="#%E5%9F%BA%E6%9C%AC%E7%94%A8%E6%B3%95">基本用法</a></td></tr><tr><td style="text-align:left;">is-show-title</td><td style="text-align:left;"><code>boolean</code></td><td style="text-align:left;">true</td><td style="text-align:left;">可选，是否显示 title 提示，<br>默认显示参数<code>label</code>的值</td><td><a href="#%E5%9F%BA%E6%9C%AC%E7%94%A8%E6%B3%95">基本用法</a></td></tr><tr><td style="text-align:left;">title</td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">--</td><td style="text-align:left;">可选，显示自定义 title 提示内容</td><td><a href="#%E5%9F%BA%E6%9C%AC%E7%94%A8%E6%B3%95">基本用法</a></td></tr><tr><td style="text-align:left;">color</td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">--</td><td style="text-align:left;">可选，复选框颜色</td><td><a href="#%E5%9F%BA%E6%9C%AC%E7%94%A8%E6%B3%95">基本用法</a></td></tr><tr><td style="text-align:left;">show-animation</td><td style="text-align:left;"><code>boolean</code></td><td style="text-align:left;">true</td><td style="text-align:left;">可选，控制是否显示动画</td><td><a href="#%E5%9F%BA%E6%9C%AC%E7%94%A8%E6%B3%95">基本用法</a></td></tr><tr><td style="text-align:left;">disabled</td><td style="text-align:left;"><code>boolean</code></td><td style="text-align:left;">false</td><td style="text-align:left;">可选，是否禁用</td><td><a href="#%E5%9F%BA%E6%9C%AC%E7%94%A8%E6%B3%95">基本用法</a></td></tr><tr><td style="text-align:left;">before-change</td><td style="text-align:left;"><code>Function|Promise&lt;boolean&gt;</code></td><td style="text-align:left;">--</td><td style="text-align:left;">可选，checkbox 切换前的回调函数，<br>返回 boolean 类型，返回 false 可以阻止 checkbox 切换</td><td><a href="#%E5%9F%BA%E6%9C%AC%E7%94%A8%E6%B3%95">基本用法</a></td></tr><tr><td style="text-align:left;">size</td><td style="text-align:left;"><a href="#icheckboxsize">ICheckboxSize</a></td><td style="text-align:left;">md</td><td style="text-align:left;">可选， checkbox 尺寸，只有在 border 属性存在时生效</td><td><a href="#%E5%B0%BA%E5%AF%B8%E5%92%8C%E8%BE%B9%E6%A1%86">尺寸</a></td></tr><tr><td style="text-align:left;">border</td><td style="text-align:left;"><code>boolean</code></td><td style="text-align:left;">false</td><td style="text-align:left;">可选， 是否有边框</td><td><a href="#%E5%B0%BA%E5%AF%B8%E5%92%8C%E8%BE%B9%E6%A1%86">边框</a></td></tr></tbody></table><h3 id="checkbox-事件" tabindex="-1">Checkbox 事件 <a class="header-anchor" href="#checkbox-事件" aria-hidden="true">#</a></h3><table><thead><tr><th style="text-align:center;">事件</th><th style="text-align:center;">说明</th><th style="text-align:center;">跳转 Demo</th></tr></thead><tbody><tr><td style="text-align:center;">change</td><td style="text-align:center;">复选框的值改变时发出的事件，值是当前状态</td><td style="text-align:center;"><a href="#%E5%9F%BA%E6%9C%AC%E7%94%A8%E6%B3%95">基本用法</a></td></tr></tbody></table><h3 id="checkboxgroup-参数" tabindex="-1">CheckboxGroup 参数 <a class="header-anchor" href="#checkboxgroup-参数" aria-hidden="true">#</a></h3><table><thead><tr><th style="text-align:center;">参数</th><th style="text-align:center;">类型</th><th style="text-align:center;">默认</th><th style="text-align:left;">说明</th><th>跳转 Demo</th></tr></thead><tbody><tr><td style="text-align:center;">name</td><td style="text-align:center;"><code>string</code></td><td style="text-align:center;">--</td><td style="text-align:left;">可选，表单域名，input 原生 name 属性</td><td><a href="#%E4%BD%BF%E7%94%A8-checkboxgroup">使用 CheckBoxGroup</a></td></tr><tr><td style="text-align:center;">direction</td><td style="text-align:center;"><code>&#39;row&#39; | &#39;column&#39;</code></td><td style="text-align:center;">&#39;column&#39;</td><td style="text-align:left;">可选，显示方向</td><td><a href="#%E4%BD%BF%E7%94%A8-checkboxgroup">使用 CheckBoxGroup</a></td></tr><tr><td style="text-align:center;">item-width</td><td style="text-align:center;"><code>number</code></td><td style="text-align:center;">--</td><td style="text-align:left;">可选，表示每一项 checkbox 的宽度(px)</td><td><a href="#%E4%BD%BF%E7%94%A8-checkboxgroup">使用 CheckBoxGroup</a></td></tr><tr><td style="text-align:center;">options</td><td style="text-align:center;"><code>array</code></td><td style="text-align:center;">[]</td><td style="text-align:left;">可选，复选框选项数组</td><td><a href="#%E4%BD%BF%E7%94%A8-checkboxgroup">使用 CheckBoxGroup</a></td></tr><tr><td style="text-align:center;">half-checked</td><td style="text-align:center;"><code>boolean</code></td><td style="text-align:center;">false</td><td style="text-align:left;">可选，半选状态</td><td><a href="#%E4%BD%BF%E7%94%A8-checkboxgroup">使用 CheckBoxGroup</a></td></tr><tr><td style="text-align:center;">is-show-title</td><td style="text-align:center;"><code>boolean</code></td><td style="text-align:center;">true</td><td style="text-align:left;">可选，是否显示 title 提示，<br>默认显示参数<code>label</code>的值</td><td><a href="#%E4%BD%BF%E7%94%A8-checkboxgroup">使用 CheckBoxGroup</a></td></tr><tr><td style="text-align:center;">color</td><td style="text-align:center;"><code>string</code></td><td style="text-align:center;">--</td><td style="text-align:left;">可选，复选框颜色</td><td><a href="#%E4%BD%BF%E7%94%A8-checkboxgroup">使用 CheckBoxGroup</a></td></tr><tr><td style="text-align:center;">show-animation</td><td style="text-align:center;"><code>boolean</code></td><td style="text-align:center;">true</td><td style="text-align:left;">可选，控制是否显示动画,按钮形态不可用</td><td><a href="#%E4%BD%BF%E7%94%A8-checkboxgroup">使用 CheckBoxGroup</a></td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;"><code>boolean</code></td><td style="text-align:center;">false</td><td style="text-align:left;">可选，是否禁用</td><td><a href="#%E4%BD%BF%E7%94%A8-checkboxgroup">使用 CheckBoxGroup</a></td></tr><tr><td style="text-align:center;">max</td><td style="text-align:center;"><code>number</code></td><td style="text-align:center;">--</td><td style="text-align:left;">可选，可被勾选的 checkbox 的最大数量</td><td><a href="#%E4%BD%BF%E7%94%A8-checkboxgroup">使用 CheckBoxGroup</a></td></tr><tr><td style="text-align:center;">before-change</td><td style="text-align:center;"><code>Function</code>|<br><code>Promise&lt;boolean&gt;</code></td><td style="text-align:center;">--</td><td style="text-align:left;">可选，checkbox 切换前的回调函数，<br>返回 false 可以阻止 checkbox 切换</td><td><a href="#%E4%BD%BF%E7%94%A8-checkboxgroup">使用 CheckBoxGroup</a></td></tr><tr><td style="text-align:center;">size</td><td style="text-align:center;"><a href="#icheckboxsize">ICheckboxSize</a></td><td style="text-align:center;">md</td><td style="text-align:left;">可选， checkbox 尺寸，只有在 border 属性存在时生效</td><td><a href="#%E5%B0%BA%E5%AF%B8%E5%92%8C%E8%BE%B9%E6%A1%86">尺寸</a></td></tr><tr><td style="text-align:center;">border</td><td style="text-align:center;"><code>boolean</code></td><td style="text-align:center;">false</td><td style="text-align:left;">可选， 是否有边框</td><td><a href="#%E5%B0%BA%E5%AF%B8%E5%92%8C%E8%BE%B9%E6%A1%86">边框</a></td></tr><tr><td style="text-align:center;">text-color</td><td style="text-align:center;"><code>string</code></td><td style="text-align:center;">--</td><td style="text-align:left;">可选， 按钮被选中的字体样式，只存在于按钮形态中</td><td><a href="#%E6%8C%89%E9%92%AE%E5%BD%A2%E6%80%81">按钮形态</a></td></tr></tbody></table><h3 id="checkboxgroup-事件" tabindex="-1">CheckboxGroup 事件 <a class="header-anchor" href="#checkboxgroup-事件" aria-hidden="true">#</a></h3><table><thead><tr><th style="text-align:left;">事件</th><th style="text-align:left;">说明</th><th style="text-align:left;">跳转 Demo</th></tr></thead><tbody><tr><td style="text-align:left;">change</td><td style="text-align:left;">checkbox 值改变事件</td><td style="text-align:left;"><a href="#checkbox-%E6%A0%B9%E6%8D%AE%E6%9D%A1%E4%BB%B6%E7%BB%88%E6%AD%A2%E5%88%87%E6%8D%A2%E7%8A%B6%E6%80%81">使用 change 事件</a></td></tr></tbody></table><h3 id="checkboxbutton-参数" tabindex="-1">CheckboxButton 参数 <a class="header-anchor" href="#checkboxbutton-参数" aria-hidden="true">#</a></h3><table><thead><tr><th style="text-align:left;">参数</th><th style="text-align:left;">类型</th><th style="text-align:left;">默认</th><th style="text-align:left;">说明</th><th>跳转 Demo</th></tr></thead><tbody><tr><td style="text-align:left;">name</td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">--</td><td style="text-align:left;">可选，表单域名，input 原生 name 属性</td><td><a href="#%E6%8C%89%E9%92%AE%E5%BD%A2%E6%80%81">按钮形态</a></td></tr><tr><td style="text-align:left;">label</td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">--</td><td style="text-align:left;">可选，显示标签</td><td><a href="#%E6%8C%89%E9%92%AE%E5%BD%A2%E6%80%81">按钮形态</a></td></tr><tr><td style="text-align:left;">value</td><td style="text-align:left;"><code>string|number</code></td><td style="text-align:left;">--</td><td style="text-align:left;">可选，选中状态的值（只有在 checkbox-group 或者绑定对象为 array 时有效）</td><td><a href="#%E6%8C%89%E9%92%AE%E5%BD%A2%E6%80%81">按钮形态</a></td></tr><tr><td style="text-align:left;">is-show-title</td><td style="text-align:left;"><code>boolean</code></td><td style="text-align:left;">true</td><td style="text-align:left;">可选，是否显示 title 提示，<br>默认显示参数<code>label</code>的值</td><td><a href="#%E6%8C%89%E9%92%AE%E5%BD%A2%E6%80%81">按钮形态</a></td></tr><tr><td style="text-align:left;">title</td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">--</td><td style="text-align:left;">可选，显示自定义 title 提示内容</td><td><a href="#%E6%8C%89%E9%92%AE%E5%BD%A2%E6%80%81">按钮形态</a></td></tr><tr><td style="text-align:left;">disabled</td><td style="text-align:left;"><code>boolean</code></td><td style="text-align:left;">false</td><td style="text-align:left;">可选，是否禁用</td><td><a href="#%E6%8C%89%E9%92%AE%E5%BD%A2%E6%80%81">按钮形态</a></td></tr><tr><td style="text-align:left;">before-change</td><td style="text-align:left;"><code>Function|Promise&lt;boolean&gt;</code></td><td style="text-align:left;">--</td><td style="text-align:left;">可选，checkbox 切换前的回调函数，<br>返回 boolean 类型，返回 false 可以阻止 checkbox 切换</td><td><a href="#%E6%8C%89%E9%92%AE%E5%BD%A2%E6%80%81">按钮形态</a></td></tr><tr><td style="text-align:left;">size</td><td style="text-align:left;"><a href="#icheckboxsize">ICheckboxSize</a></td><td style="text-align:left;">md</td><td style="text-align:left;">可选， checkbox 尺寸</td><td><a href="#%E6%8C%89%E9%92%AE%E5%BD%A2%E6%80%81">按钮形态</a></td></tr></tbody></table><h3 id="checkbox-类型定义" tabindex="-1">Checkbox 类型定义 <a class="header-anchor" href="#checkbox-类型定义" aria-hidden="true">#</a></h3><h4 id="icheckboxsize" tabindex="-1">ICheckboxSize <a class="header-anchor" href="#icheckboxsize" aria-hidden="true">#</a></h4><div class="language-ts"><pre><code><span class="token keyword">type</span> <span class="token class-name">ICheckboxSize</span> <span class="token operator">=</span> <span class="token string">&#39;lg&#39;</span> <span class="token operator">|</span> <span class="token string">&#39;md&#39;</span> <span class="token operator">|</span> <span class="token string">&#39;sm&#39;</span><span class="token punctuation">;</span>
</code></pre></div></div></div><div data-v-35e0cb6b><div class="page-contributor-label" data-v-35e0cb6b>Contributors</div><div class="page-contributor" data-v-35e0cb6b data-v-36223ac2><!--[--><a href="https://github.com/brenner8023" target="_blank" data-v-36223ac2><span class="devui-avatar contributor-avatar" style="margin-right:8px;margin-bottom:4px;" data-v-36223ac2><img src="https://avatars.githubusercontent.com/u/31237954?v=4" alt style="height:36px;width:36px;border-radius:100%;"><!----><!----><!----></span></a><a href="https://github.com/lj1990111" target="_blank" data-v-36223ac2><span class="devui-avatar contributor-avatar" style="margin-right:8px;margin-bottom:4px;" data-v-36223ac2><img src="https://avatars.githubusercontent.com/u/8649913?v=4" alt style="height:36px;width:36px;border-radius:100%;"><!----><!----><!----></span></a><a href="https://github.com/vaebe" target="_blank" data-v-36223ac2><span class="devui-avatar contributor-avatar" style="margin-right:8px;margin-bottom:4px;" data-v-36223ac2><img src="https://avatars.githubusercontent.com/u/52314078?v=4" alt style="height:36px;width:36px;border-radius:100%;"><!----><!----><!----></span></a><a href="https://github.com/Zcating" target="_blank" data-v-36223ac2><span class="devui-avatar contributor-avatar" style="margin-right:8px;margin-bottom:4px;" data-v-36223ac2><img src="https://avatars.githubusercontent.com/u/13329558?v=4" alt style="height:36px;width:36px;border-radius:100%;"><!----><!----><!----></span></a><a href="https://github.com/linxiang07" target="_blank" data-v-36223ac2><span class="devui-avatar contributor-avatar" style="margin-right:8px;margin-bottom:4px;" data-v-36223ac2><img src="https://avatars.githubusercontent.com/u/40119767?v=4" alt style="height:36px;width:36px;border-radius:100%;"><!----><!----><!----></span></a><a href="https://github.com/qiugu" target="_blank" data-v-36223ac2><span class="devui-avatar contributor-avatar" style="margin-right:8px;margin-bottom:4px;" data-v-36223ac2><img src="https://avatars.githubusercontent.com/u/33192247?v=4" alt style="height:36px;width:36px;border-radius:100%;"><!----><!----><!----></span></a><!--]--></div></div><footer class="page-footer" data-v-35e0cb6b data-v-63a8fcc6><div class="edit" data-v-63a8fcc6><div class="edit-link" data-v-63a8fcc6 data-v-084d37fe><!----></div></div><div class="updated" data-v-63a8fcc6><!----></div></footer><div class="next-and-prev-link" data-v-35e0cb6b data-v-1443c067><div class="container" data-v-1443c067><div class="prev" data-v-1443c067><a class="link" href="/components/auto-complete/" data-v-1443c067><svg t="1637469990202" class="icon icon icon-prev" viewbox="0 0 1056 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5081" width="16" height="16" data-v-1443c067><path d="M277.92 512.064c0 8.128 3.072 16.224 9.28 22.4l362.336 362.336a31.808 31.808 0 0 0 45.12-0.128 31.904 31.904 0 0 0 0.128-45.12L355.2 512 694.72 172.448a31.808 31.808 0 0 0-0.128-45.12 31.904 31.904 0 0 0-45.12-0.128L287.232 489.536a31.616 31.616 0 0 0-9.312 22.4l0.032 0.128z" fill="var(--devui-brand, #5e7ce0)" p-id="5082"></path></svg><span class="text" data-v-1443c067>AutoComplete 自动补全</span></a></div><div class="next" data-v-1443c067><a class="link" href="/components/date-picker-pro/" data-v-1443c067><span class="text" data-v-1443c067>DatePickerPro 日期选择器</span><svg t="1637469947735" class="icon icon icon-next" viewbox="0 0 1056 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4917" width="16" height="16" data-v-1443c067><path d="M746.08 512.064a31.584 31.584 0 0 1-9.28 22.4L374.464 896.8a31.808 31.808 0 0 1-45.12-0.128 31.904 31.904 0 0 1-0.128-45.12L668.8 512 329.28 172.448a31.808 31.808 0 0 1 0.128-45.12 31.904 31.904 0 0 1 45.12-0.128l362.304 362.336c6.208 6.176 9.28 14.272 9.312 22.4l-0.032 0.128z" fill="var(--devui-brand, #5e7ce0)" p-id="4918"></path></svg></a></div></div></div><!--[--><!--]--><!----><aside class="toc-warpper" data-v-35e0cb6b data-v-38776bfe><nav class="devui-content-nav" data-v-38776bfe><h3 class="devui-fast-forward" data-v-38776bfe>快速前往</h3><ul class="devui-step-nav" data-v-38776bfe><!--[--><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#基本用法" title="基本用法" data-v-38776bfe>基本用法</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#使用-checkboxgroup" title="使用 CheckBoxGroup" data-v-38776bfe>使用 CheckBoxGroup</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#尺寸和边框" title="尺寸和边框" data-v-38776bfe>尺寸和边框</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#按钮形态" title="按钮形态" data-v-38776bfe>按钮形态</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#checkbox-根据条件终止切换状态" title="checkbox 根据条件终止切换状态" data-v-38776bfe>checkbox 根据条件终止切换状态</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#checkbox-group-根据条件终止切换状态" title="checkbox-group 根据条件终止切换状态" data-v-38776bfe>checkbox-group 根据条件终止切换状态</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#checkbox-参数" title="Checkbox 参数" data-v-38776bfe>Checkbox 参数</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#checkbox-事件" title="Checkbox 事件" data-v-38776bfe>Checkbox 事件</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#checkboxgroup-参数" title="CheckboxGroup 参数" data-v-38776bfe>CheckboxGroup 参数</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#checkboxgroup-事件" title="CheckboxGroup 事件" data-v-38776bfe>CheckboxGroup 事件</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#checkboxbutton-参数" title="CheckboxButton 参数" data-v-38776bfe>CheckboxButton 参数</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#checkbox-类型定义" title="Checkbox 类型定义" data-v-38776bfe>Checkbox 类型定义</a></li><!--]--></ul><div class="devui-marker" data-v-38776bfe></div></nav></aside></div></main></div><!----><!----><!----><!--]--></div>
    <script>__VP_HASH_MAP__ = JSON.parse("{\"components_accordion_index.md\":\"a92e3443\",\"components_alert_index.md\":\"c7702e03\",\"components_anchor_index.md\":\"f7333cbb\",\"components_auto-complete_index.md\":\"4de98e8d\",\"components_avatar_index.md\":\"69aa04d5\",\"components_back-top_index.md\":\"d1ab787c\",\"components_badge_index.md\":\"e4750848\",\"components_breadcrumb_index.md\":\"c976c02b\",\"components_button_index.md\":\"5ad2976d\",\"components_card_index.md\":\"07ffbefa\",\"components_carousel_index.md\":\"f88f0b13\",\"components_cascader_index.md\":\"ee34cce7\",\"components_checkbox_index.md\":\"3ec7d7a1\",\"components_collapse_index.md\":\"9f2cbd98\",\"components_color-picker_index.md\":\"76658b37\",\"components_comment_index.md\":\"7f6ae658\",\"components_countdown_index.md\":\"556b68b1\",\"components_date-picker-pro_index.md\":\"a354c050\",\"components_date-picker_index.md\":\"00801143\",\"components_dragdrop_index.md\":\"27ca48b1\",\"components_drawer_index.md\":\"f1f95db0\",\"components_dropdown_index.md\":\"2e85d37e\",\"components_editable-select_index.md\":\"dfceeabe\",\"components_form_index.md\":\"aa7415f4\",\"components_fullscreen_index.md\":\"91a2fd77\",\"components_gantt_index.md\":\"c7536435\",\"components_grid_index.md\":\"646531b7\",\"components_icon_index.md\":\"b13a05fb\",\"components_image-preview_index.md\":\"6064aa0f\",\"components_input-icon_index.md\":\"03605b44\",\"components_input-number_index.md\":\"75cb181b\",\"components_input_index.md\":\"399db2a5\",\"components_layout_index.md\":\"bd89a2a7\",\"components_list_index.md\":\"398a7889\",\"components_loading_index.md\":\"86c25c88\",\"components_mention_index.md\":\"4e5fcead\",\"components_menu_index.md\":\"5e7b2a2a\",\"components_message_index.md\":\"288b49b1\",\"components_modal_index.md\":\"6d985802\",\"components_multi-auto-complete_index.md\":\"d7dd7812\",\"components_nav-sprite_index.md\":\"59326b1c\",\"components_notification_index.md\":\"17d66bf4\",\"components_overlay_index.md\":\"b3c2d8b1\",\"components_overview_index.md\":\"4f4893a2\",\"components_pagination_index.md\":\"fa43e1ee\",\"components_panel_index.md\":\"78140495\",\"components_popover_index.md\":\"e061fad6\",\"components_progress_index.md\":\"f99bb298\",\"components_quadrant-diagram_index.md\":\"5b863b4f\",\"components_radio_index.md\":\"1569e619\",\"components_rate_index.md\":\"8ed5b018\",\"components_read-tip_index.md\":\"65f3a3e8\",\"components_result_index.md\":\"5a0e2c71\",\"components_ripple_index.md\":\"e22eb85c\",\"components_search_index.md\":\"a6ca9673\",\"components_select_index.md\":\"14f5b72d\",\"components_skeleton_index.md\":\"87cfbcd2\",\"components_slider_index.md\":\"c3e69a49\",\"components_splitter_index.md\":\"7b49b977\",\"components_statistic_index.md\":\"699289db\",\"components_status_index.md\":\"9b3ee9c1\",\"components_steps-guide_index.md\":\"4d707f63\",\"components_steps_index.md\":\"75686d75\",\"components_sticky_index.md\":\"839717a7\",\"components_switch_index.md\":\"05eb9888\",\"components_table_index.md\":\"1b34dab5\",\"components_tabs_index.md\":\"2612fccc\",\"components_tag-input_index.md\":\"d6c90326\",\"components_tag_index.md\":\"9d46f105\",\"components_textarea_index.md\":\"f6a86e66\",\"components_time-picker_index.md\":\"f8cff83c\",\"components_time-select_index.md\":\"38dfaf50\",\"components_timeline_index.md\":\"9b7ebcb4\",\"components_tooltip_index.md\":\"f9f4b384\",\"components_transfer_index.md\":\"7005ca26\",\"components_tree-select_index.md\":\"d122e78e\",\"components_tree_index.md\":\"2611f2c7\",\"components_upload_index.md\":\"65171bcd\",\"components_virtual-list_index.md\":\"6c90a3dd\",\"contributing_development-specification_api-demo-design_index.md\":\"fc9f2d3e\",\"contributing_development-specification_coding-specification_index.md\":\"af51d196\",\"contributing_development-specification_component-document_index.md\":\"a849b30c\",\"contributing_development-specification_directory-organization_index.md\":\"58197a6f\",\"contributing_development-specification_index.md\":\"1df9cfa5\",\"contributing_index.md\":\"7660b0ff\",\"en-us_components_alert_index.md\":\"96d493c1\",\"en-us_components_auto-complete_api-en.md\":\"004a35e9\",\"en-us_components_avatar_index.md\":\"dbe38f1a\",\"en-us_components_badge_index.md\":\"e48f2672\",\"en-us_components_button_index.md\":\"ec772540\",\"en-us_components_carousel_index.md\":\"3fec7a3f\",\"en-us_components_color-picker_index.md\":\"9fe5a01c\",\"en-us_components_comment_index.md\":\"2a0696ba\",\"en-us_components_editable-select_index.md\":\"73d1175f\",\"en-us_components_form_index.md\":\"65caae2d\",\"en-us_components_input_index.md\":\"136ae80e\",\"en-us_components_menu_index.md\":\"0bb24150\",\"en-us_components_message_index.md\":\"3fa5c7c8\",\"en-us_components_modal_index.md\":\"736ef31f\",\"en-us_components_panel_index.md\":\"4a1db166\",\"en-us_components_popover_index.md\":\"6b07f22f\",\"en-us_components_progress_index.md\":\"b364f914\",\"en-us_components_radio_index.md\":\"bddcefa7\",\"en-us_components_rate_index.md\":\"3940452b\",\"en-us_components_read-tip_index.md\":\"56a74b67\",\"en-us_components_result_index.md\":\"369abc51\",\"en-us_components_ripple_index.md\":\"b6d519cb\",\"en-us_components_search_index.md\":\"8745e3f6\",\"en-us_components_skeleton_index.md\":\"73d6ba05\",\"en-us_components_slider_index.md\":\"d6b0ecd3\",\"en-us_components_splitter_index.md\":\"ae397e5b\",\"en-us_components_statistic_index.md\":\"6f27cda4\",\"en-us_components_status_index.md\":\"e80d4793\",\"en-us_components_tag_index.md\":\"2388e235\",\"en-us_components_tooltip_index.md\":\"6013670f\",\"en-us_index.md\":\"45997edd\",\"en-us_quick-start_index.md\":\"5cb0ca76\",\"index.md\":\"d8afff32\",\"on-demand_index.md\":\"cc889f91\",\"quick-start_index.md\":\"2f52f012\",\"theme-guide_index.md\":\"4b58afef\"}")</script>
    <script type="module" async src="/assets/app.43ba01c1.js"></script>
    
  </body>
</html>